<template>
	<div class="sort-chart-box">
		<div id="sortChart" ref="sortChartRef"></div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";
import "echarts/lib/component/dataZoom";
import httpApi from "@/api-dashboard/propertyApi.js";

const props = defineProps({
	chartData: {
		type: Array,
		default: () => [],
	},
});

let typeArr = ref({ 应收未收预警: 0, 资产闲置预警: 1, 租金水平排名: 2 });

let allData = ref([]);
let xArr = ref([]);
let yArr = ref([]);
let yArr2 = ref([]);
let titleArr = ref([]);
let colorArr = ref([]);

let options = reactive({
	grid: {
		top: "5%", //grid 组件离容器的距离
		right: "10%",
		left: "16%",
	},
	xAxis: {
		type: "value",
		//刻度
		axisTick: {
			show: false,
		},
		// 轴线
		axisLine: {
			show: false,
		},
		// 刻度标签
		axisLabel: {
			show: false,
		},
		splitLine: {
			show: false,
		},
	},
	yAxis: [
		{
			type: "category",
			data: xArr,
			inverse: true,
			axisTick: {
				show: false,
			},
			axisLabel: {
				textStyle: {
					color: (value, index) => {
						return colorArr.value[index];
					},
				},
				// interval: 0,
			},
			axisLine: {
				show: false,
			},
		},
	],
	// dataZoom: [
	// 	{
	// 		show: false,
	// 		orient: "vertical",
	// 		width: 10,
	//     // right: "8%",
	//     left:"3%",
	// 		start: 95,
	// 		end: 100,
	// 		maxValueSpan: 10,
	// 		textStyle: {
	// 			color: "#fff",
	// 		},
	// 	},
	// ],
	series: [
		{
			data: yArr2,
			type: "bar",
			barGap: "-100%",
			barWidth: 5,
			itemStyle: {
				color: "transparent",
			},
		},
		{
			data: yArr,
			type: "bar",
			barWidth: 5,
			itemStyle: {
				color: {
					x: 0, //右
					y: 0, //下
					x2: 1, //左
					y2: 0, //上
					colorStops: [
						{
							offset: 0,
							color: "#10274B",
						},
						{
							offset: 1,
							color: "#1978E5",
						},
					],
				},
			},
			//hover高亮
			emphasis: {
				label: {
					show: true,
					position: ["1%", "-50%"],
					color: "#00D3FD",
					align: "left",
					verticalAlign: "bottom",
					formatter: (params) => {
						return titleArr.value[params.dataIndex];
					},
				},
				itemStyle: {
					color: {
						x: 0, //右
						y: 0, //下
						x2: 1, //左
						y2: 0, //上
						colorStops: [
							{
								offset: 0,
								color: "#10274B",
							},
							{
								offset: 1,
								color: "#00D5FF",
							},
						],
					},
				},
			},
		},
	],
});
let sortChart = null;
let sourceType = "";
let initSortChartData = async (typeIndex) => {
	let res = "";
	let valStr = "";
	if (typeIndex === 0) {
		res = await httpApi.assetAccrued({
			sourceType,
		});
		valStr = "total_accrued";
	} else if (typeIndex === 1) {
		res = await httpApi.assetIdle({
			sourceType,
		});
		valStr = "idle_area";
	} else if (typeIndex === 2) {
		res = await httpApi.assetUnit({
			sourceType,
		});
		valStr = "unit_price";
	}
	let { httpStatusCode, data } = res;
	if (httpStatusCode === 200) {
		if (data.records.length) {
			let arr = [];
			if (data.records.length > 15) {
				arr = data.records.slice(0, 15);
			} else {
				arr = data.records;
			}
			allData.value = arr.map((item, i) => {
				return {
					name: `TOP${i + 1}`,
					value: item[valStr],
					title: item.assets_name,
				};
			});
		} else {
			allData.value = [];
		}
	}
	xArr.value = allData.value.map((item) => {
		return item.name;
	});
	yArr.value = allData.value.map((item) => {
		return {
			value: item.value,
		};
	});
	yArr2.value = allData.value.map((item) => {
		return {
			value: item.value,
			label: {
				show: false,
				position: "right",
				color: "#D8F0FF",
				textShadowColor: "#3FBFFF",
				textShadowBlur: 2,
			},
		};
	});
	titleArr.value = allData.value.map((item) => {
		return item.title;
	});
	let topArr = [];
	let otherArr = [];
	if (allData.value.length > 5) {
		topArr = new Array(5).fill("#FFDA3A");
		otherArr = new Array(allData.value.length - 5).fill("#D8F0FF");
	} else {
		topArr = new Array(allData.value.length).fill("#FFDA3A");
	}
  colorArr.value = topArr.concat(otherArr);
	// options.dataZoom[0].show = xArr.value.length > 10 ? true : false;
	sortChart.setOption(options);
};
const initSortChart = (name, i) => {
	sourceType = i;
	// 初始化echarts实例
	if (sortChart == null) {
		sortChart = echarts.init(document.getElementById("sortChart"));
	}
	initSortChartData(typeArr.value[name]);

	sortChart.on("mouseover", (params) => {
		colorArr.value[params.dataIndex] = "#00D3FD";
		options.series[0].data[params.dataIndex].label.show = true;
		sortChart.setOption({ series: options.series });
	});
	sortChart.on("mouseout", (params) => {
		if (params.dataIndex > 4) {
			colorArr.value[params.dataIndex] = "#D8F0FF";
		} else {
			colorArr.value[params.dataIndex] = "#FFDA3A";
		}
		options.series[0].data[params.dataIndex].label.show = false;
		sortChart.setOption({ series: options.series });
	});
};
defineExpose({
	initSortChart,
});
</script>
<style lang="scss" scoped>
.sort-chart-box {
	width: 100%;
	height: 100%;
	#sortChart {
		width: 100%;
		height: 100%;
	}
}
</style>
